<style>
    .program-world{
        margin: 80px auto;
    }
    .program-world .title{
        margin-bottom: 30px;
        text-align: left;
    }
    .program-world .page-width{
        padding-right: 0;
    }
    .all_program-ul li{
      position: relative;
    }
    .all_program-ul li .media{
      border-radius: 8px;
    }
    .text-content {
      position: absolute;
      width: 100%;
      z-index: 1;
      text-align: left;
      color: #fff;
    }
    .all_program-ul .bottom{
      bottom: 26px;
    }
    .all_program-ul .top{
      top: 26px;
    }
    .text-content .text{
      font-size: 24px;
      font-weight: 700;
      line-height: 100%;
    }
    .text-content p{
      font-size: 14px;
      font-weight: 500;
      line-height: 24px;
      margin: 8px auto;
    }
    .text-content a{
      color: #FFF;
      font-size: 16px;
      font-weight: 700;
      line-height: 22px;
      text-decoration: none;
    }
    .text-content .block-text{
      padding: 0 26px;
    }
    .text-content a svg{
      margin-left: 12px;
    }
    .program-world .swiper-button-next{
        top: -45px;
        right: 0;
        z-index: 2;
        box-shadow: none;
    }
    .program-world .swiper-button-prev{
         top: -45px;
        right: 62px;
        left: auto;
        z-index: 2;
        box-shadow: none;
    }
    .program-world .swiper-button-next circle,
    .program-world .swiper-button-prev circle{
      fill: #ccc;
      stroke: #ccc;
    }
    .program-world .swiper-button-next:hover circle,
    .program-world .swiper-button-prev:hover circle{
      fill: #000;
      stroke: #000;
    }
    .icon-program{
      position: relative;
    }

    @media screen and (max-width: 990px){
      .all_program-ul li .media{
        border-radius: 6px;
      }
      .program-world .swiper-button-next,
      .program-world .swiper-button-prev{
        display: none !important;
      }
      .all_program-ul{
        padding-top: 23px;
      }
      .program-world {
        margin: 40px auto;
      }
      .program-world .title {
        margin-bottom: 10px;
        text-align: left;
      }
      .program-world  .swiper-pagination{
        top: 0;
        bottom: auto;
        text-align: left;
      }
      .swiper-all_program {
        padding: 20px 0;
      }
      .program-world .swiper-pagination-bullet{
        background: var(--grey-40, #CCC);
      }
      .program-world .swiper-pagination-bullet-active{
        background: #000;
      }
      .text-content .block-text {
        padding: 0 20px;
      }
      .text-content .text {
        font-size: 18px;
     }
     .text-content p {
        margin: 4px auto;
    }
    }
</style>
<div class="program-world">
  <div class="page-width">
    {% if section.settings.heading != blank %}
        <h2 class="title left">{{ section.settings.heading | escape }}</h2>
    {% endif %}
   <div class="icon-program">
      <div class="swiper-pagination all"></div>
      <div class="swiper-button-next">{% render 'swiper-button-next' %}</div>
      <div class="swiper-button-prev">{% render 'swiper-button-prev' %}</div>
   </div> 
   <div class="swiper-father">
    <div class="swiper swiper-all_program">
      <ul class="swiper-wrapper all_program-ul">
          {% for block in section.blocks %}
            <li class="swiper-slide">
              {%- if block.settings.button_link != blank -%}               
               <a{% if block.settings.button_link != blank %} href="{{ block.settings.button_link }}"{% endif %} class="no-underline"{% if block.settings.button_link == blank %} aria-disabled="true"{% endif %}>
             {% endif %}
              <div class="image-with-text__media {% if block.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
                  {% if block.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 }}%;"{% endif %}
                  >
                  {%- if block.settings.image != blank -%}
                  <img
                      srcset="{%- if block.settings.image.width >= 165 -%}{{ block.settings.image | img_url: '165x' }} 165w,{%- endif -%}
                      {%- if block.settings.image.width >= 258 -%}{{ block.settings.image | img_url: '258x' }} 258w,{%- endif -%}
                      {%- if block.settings.image.width >= 323 -%}{{ block.settings.image | img_url: '323x' }} 323w,{%- endif -%}
                      {%- if block.settings.image.width >= 360 -%}{{ block.settings.image | img_url: '360x' }} 360w,{%- endif -%}
                      {%- if block.settings.image.width >= 535 -%}{{ block.settings.image | img_url: '535x' }} 535w,{%- endif -%}
                      {%- if block.settings.image.width >= 750 -%}{{ block.settings.image | img_url: '750x' }} 750w,{%- endif -%}
                      {%- if block.settings.image.width >= 1070 -%}{{ block.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
                      {%- if block.settings.image.width >= 1500 -%}{{ block.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
                      {{ block.settings.image | img_url: 'master' }} {{ block.settings.image.width }}w"
                      src="{{ block.settings.image | img_url: '1500x' }}"
                      data-src="{{ block.settings.image | img_url: '1500x' }}"
                      sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
                      alt="{{ block.settings.image.alt | escape }}"
                      loading="lazy"
                      class="lazyload"
                      width="{{ block.settings.image.width }}"
                      height="{{ block.settings.image.height }}"
                  >
                  {%- else -%}
                  {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                  {%- endif -%}
              </div>
              {%- if block.settings.button_link != blank -%}
              </a>
            {% endif %}    
                <div class="text-content {% if block.settings.text_content != blank %}{{ block.settings.text_content }} {% endif %}">
                  <div class="block-text">
                    {% if block.settings.text != blank %}
                    <div class="text">{{ block.settings.text }}</div>
                  {% endif %}
                  {% if block.settings.richtext != blank %}
                    <div class="richtext">{{ block.settings.richtext }}</div>
                  {% endif %}
                  {% if block.settings.button_label != blank %}
                    <a {% if block.settings.button_link != blank %}href="{{ block.settings.button_link }}" {% endif %} {% if block.settings.button_link == blank %} aria-disabled="true"{% endif %} >
                      {{ block.settings.button_label | escape }} {% render 'icon-explore' %}
                    </a>
                  {% endif %}   
                  </div>             
               </div>
            </li>
          {% endfor %}
      </ul>
  </div>
   </div>
  </div>
</div>

<script>
   var swiper  = new Swiper(".swiper-all_program", {
     speed: 600,
     spaceBetween: 20,
     loop: true,
     navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
     },
     pagination: {
      el: ".swiper-pagination.all",
     },
     breakpoints: {
        375: {
          slidesPerView: 1.2,
          spaceBetween: 20,
        },
        750: {
          slidesPerView: 2.2,
          spaceBetween: 20,
        },
        1280: {
          slidesPerView: 3.2,
          spaceBetween: 20,
        },
        1440: {
          slidesPerView: 3.3,
          spaceBetween: 20,
        },
        1920: {
            slidesPerView: 3.5,
            spaceBetween: 20,
        }
      }
   });
 </script> 

{% schema %}
    {
      "name": "All program",
      "class": "all-program",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "label": "Heading"
        }
      ],
      "blocks": [
      {
      "type": "image",
      "name": "image",
      "settings": [
        {
          "type": "select",
          "id": "text_content",
          "options": [
            {
              "value": "top",
              "label": "Top"
            },
            {
              "value": "bottom",
              "label": "bottom"
            }
          ],
          "default": "bottom",
          "label": "Text content"
         },
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
          {
            "type": "text",
            "id": "text",
            "label": "text"
          },
          {
            "type": "richtext",
            "id": "richtext",
            "label": "richtext"
          },
          {
            "type": "text",
            "id": "button_label",
            "label": "Button label"
          },
          {
            "type": "url",
            "id": "button_link",
            "label": "button Link"
          }
        ]
      }
     ],
     "presets": [
        {
          "name": "All program"
        }
      ]
    }
  {% endschema %}